import BasicLayout from "@/components/BasicLayout";
import ShopCard from "@/components/ShopCard";
import useQuery from "@/hooks/useQuery";
import { ShopFields } from "@/types/ShopEntity";
import { useLoad } from "@tarojs/taro";
import gql from "graphql-tag";
import { useMemo } from "react";



const SelShopListQuery = gql`
    query SelShopList($address:String,$order:String,$keyword:String){
        selShopList(address:$address,order:$order,keyword:$keyword){
             ${ShopFields}
        }
    }
`
export default function Index() {
    const { data: shopListData, refetch } = useQuery(SelShopListQuery, {
        autoFetch: false
    })
    const shopList = useMemo(() => shopListData?.selShopList || [], [shopListData])
    useLoad(({ keyword }) => {
        refetch({ keyword })
        console.log('Page loaded.');
    });

    return (
        <BasicLayout>
            {shopList.map((item => (
                <ShopCard
                    key={item.id}
                    {...item}
                />
            )))}
        </BasicLayout>
    )
}